<template>
  <div class="box">
    <el-form :model="form" :rules="rules">
      <el-form-item prop="name" label="分类名称:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item prop="level" label="上级分类:">
        <el-select v-model="value" class="m-2" placeholder="无上级分类">
          <el-option
            v-for="item in state.options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="productUnit" label="数量单位:">
        <el-input v-model="form.productUnit"></el-input>
      </el-form-item>
      <el-form-item prop="sort" label="排序:">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item prop="showStatus" label="是否显示:">
        <el-radio-group v-model="form.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="navStatus" label="是否显示在导航栏:">
        <el-radio-group v-model="form.navStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="icon" label="分类图标:">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary">上传文件</el-button>
            <div style="font-size: 10px; color: #ccc; margin-left: 10px">
              只能上传jpg/png文件，且不超过100kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item prop="parentId" label="筛选属性:">
        <el-cascader
          v-model="attributeValue"
          :options="attributeOptions"
          :props="props"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item prop="keyword" label="关键词:">
        <el-input></el-input>
      </el-form-item>
      <el-form-item prop="description" label="分类描述:">
        <el-input></el-input>
      </el-form-item>
      <el-form-item>
        <div style="margin-left: 130px">
          <el-button type="primary" @click="sureFn">提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { user } from "@/api";
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox, UploadInstance } from "element-plus";
interface IState {
  form: IGoodsData;
  options: IGoodsData[];
  attributeOptions: IGoodsAttributeData[];
}
const value = ref("");
const attributeValue = ref([]);
const route = useRoute();
const router = useRouter();
const uploadRef = ref<UploadInstance>();
const props = {
  expandTrigger: "hover",
};
const submitUpload = () => {
  uploadRef.value!.submit();
};
const handleChange = (value: IGoodsAttributeData) => {
  console.log(value);
};
const state = reactive<IState>({
  form: {
    description: "",
    icon: "",
    id: 0,
    keywords: "",
    level: 0,
    name: "",
    navStatus: 0,
    parentId: 0,
    productCount: 0,
    productUnit: "",
    showStatus: 0,
    sort: 0,
  },
  options: [],
  attributeOptions: [],
});
const sureFn = () => {
  ElMessageBox.confirm("确定要保存吗")
    .then(() => {
      // 发请求
      user
        .upDateTheGoodAttributeApi({
          id: parseInt(route.query.id),
          productAttributeParam: state.form,
        })
        .then((res) => {
          ElMessage({
            message: res.message,
            type: res.code === 200 ? "success" : "error",
          });
          router.push("/pms/productCate");
        });
    })
    .catch(() => {});
};
user
  .goodsClassifyApi({ pageNum: 1, pageSize: 100, parentId: 0 })
  .then((res) => {
    if (res.code === 200) {
      state.options = res.data.list;
    }
  });
const id = parseInt(route.query.id as string);
user.getTheGoodListApi(id).then((res) => {
  if (res.code === 200) {
    state.form = res.data;
  }
});
user.getGoodsAttributeApi().then((res) => {
  if (res.code === 200) {
    state.attributeOptions = res.data;
  }
});

const rules = reactive({
  name: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    { min: 3, max: 5, message: "长度3-5之间", trigger: "blur" },
  ],
});
const { form, attributeOptions } = toRefs(state);
</script>

<style lang="less" scoped>
.box {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}
:deep(.el-form-item__label) {
  width: 130px;
}
</style>
